<template>
  <div>
     <card :header="{title:'概况'}">
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-l vux-1px-r">
          姓名
          <br/>
          <span>{{name}}</span>
        </div>
        <div class="vux-1px-r">
          申请积分
          <br/>
          <span>{{applyScore}}</span>
        </div>
        <div>
          未通过
          <br/>
          <span>{{selfScore}}</span>
        </div>
      </div>
    </card>
    <div>
      <group title="待审核积分">
        <div>
          <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;">
            <thead>
              <tr style="background-color: #F7F7F7">
                <th>申请时间</th>
                <th>积分类别</th>
                <th>申请积分</th>
              </tr>
            </thead>
            <tbody v-for="(data,index) in scoreList">
              <tr>
                <td><span>{{data.year}}</span><span>-</span><span>{{data.month>9?data.month:0+data.month}}</span></td>
                <td style="padding:2px 2px 2px 35px; text-align:left">{{data.category}}</td>
                <td style="padding:2px 25px 2px 20px;text-align:right"><router-link :to="'/tabbar/score-detail?scoreId='+data.scoreId"><div style="color:green;">{{data.selfScore}}</div></router-link></td>
              </tr>
            </tbody>
          </x-table>
        </div>
      </group>
    </div>
  </div>
</template>

<script>
import {XTable, Badge, Divider, Card, Cell, Group, CellBox } from 'vux'

export default {
  components: {
    XTable,
    Badge,
    Card,
    Divider,
    Cell,
    Group,
    CellBox
  },
  data () {
    //routerParams
    var rpId = this.$route.query.userId
    var rpName = this.$route.query.name
    var rpApplyScore = this.$route.query.applyScore
    var rpSelfScore = this.$route.query.selfScore
    return {
      scoreList: [],
      userId: rpId,
      name: rpName,
      applyScore: rpApplyScore,
      selfScore: rpSelfScore
    }
  },
  mounted: function () {
    this.getScoreInfo()
  },
  methods: {
    getScoreInfo: function () {
      var self = this
      self.$ajax({
        method: 'get',
        url: '../wx/userAdditional/search/list',
        params: {
          userId: self.userId,
          status: '1'
        }
      })
      .then(function (res) {
        self.scoreList = res.data
      })
      .catch(function (err) {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
.slide {
  padding: 0 20px;
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
}
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
</style>
